<template>
  <view class="set">
    <view class="set-header">
      <img src="/static/other/set/left_arrow.png" alt="返回" mode="aspectFill"  class="set-header-img" @click="goback()"/>
      <text class="set-header-text">设置</text>
      <text class="null"></text>
    </view>
    <view class="set-content">
      <text class="set-content-text">设置字体</text>
      <view class="set-content-item">
        <u-radio-group
          v-model="radiovalue"
          placement="column"
          iconPlacement="right"
        >
          <u-radio
          v-for="(item, index) in radiolist"
          :key="index"
          :name="item.value"
          :label="item.label"
          :value="item.value"
          @change="handleFontChange"
          class="set-content-item-label"
          >
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <view class="set-bottom"></view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        radiolist: [
            { label: '默认', value: 'default' },
            { label: '普通', value: 'normal' },
            { label: '较大', value: 'large' }
        ],
        radiovalue: 'default'
      };
    },
    methods:{
      goback(){
        uni.navigateBack({
          delta:1
        });
      },
      handleFontChange(value) {
        let fontSize = '17px';
        switch(value) {
          case 'normal':
            fontSize = '10px';
            break;
          case 'large':
            fontSize = '25px';
            break;
        }
         document.documentElement.style.fontSize = fontSize;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .set{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(to bottom, #eaf6ff, #f5faff);
    position: relative;
    .set-header{
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color:rgb(31,81,154);
     padding: 30px 20px 13px 20px;
     .set-header-img{
       width: 10px;
       height: 15px;
      }
     .set-header-text{
       font-size: 17px;
       font-weight: 600;
       color: white;
      }
     .null{
       width: 10px;
       height: 15px;
      }
    }
    .set-content{
      display: flex;
      flex-direction: column;
      padding: 15px;
      background-color: white;
      .set-content-text{
        padding: 15px;
        font-weight: 550;
        border-bottom: 1px solid #e0e0e0;
      }
      .set-content-item{
        padding: 15 0px;
        .set-content-item-label{
          padding: 15px;
          border-bottom: 1px solid #e0e0e0;
        }
      }
    }
    .set-bottom{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      background-color: white;
    }
  }
</style>
